<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    //
    var _this = this;
    _this.ctx = uni.createCanvasContext('canvasid', this);
    const C_W = 650; //canvas宽度，使用的手机屏幕
    _this.canvasW = C_W; //
    _this.canvasH = 420; // 设置画布高度
    _this.ctx.setFillStyle('#545a7a'); //canvas背景颜色
    _this.ctx.fillRect(0, 0, _this.canvasW, _this.canvasH); //canvas画布大小








    methods = {


      //微信里面绘制图片需要先将图片地址转为临时图片地址使用方法如下
      async getImageInfo({ imgSrc }) {
        return new Promise((resolve, errs) => {
          uni.getImageInfo({
            src: imgSrc,
            success: function (image) {
              resolve(image);
            },
            fail(err) {
              errs(err);
            }
          });
          // 调用方法
        });
        let _imgInfo = await _this.getImageInfo({ imgSrc: _this.HeadImg });
      },
      drawCircular(ctx, url, x, y, width, height) {
        //画圆形头像
        var avatarurl_width = width;
        var avatarurl_heigth = height;
        var avatarurl_x = x;
        var avatarurl_y = y;
        ctx.save();
        ctx.beginPath();
        ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
        ctx.restore();
      }
      ,
      fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
        //圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) {
          return false;
        }

        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边
        _this.drawRoundRectPath(cxt, width, height, radius);
        cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
        cxt.fill();
        cxt.restore();
      },
      drawRoundRectPath(cxt, width, height, radius) {
        cxt.beginPath(0);
        //从右下角顺时针绘制，弧度从0到1/2PI
        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

        //矩形下边线
        cxt.lineTo(radius, height);

        //左下角圆弧，弧度从1/2PI到PI
        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

        //矩形左边线
        cxt.lineTo(0, radius);

        //左上角圆弧，弧度从PI到3/2PI
        cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

        //上边线
        cxt.lineTo(width - radius, 0);

        //右上角圆弧
        cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

        //右边线
        cxt.lineTo(width, height - radius);
        cxt.closePath();
      }
    },


  </script>
</body>

</html>